<script setup>
import BorderBox1 from '@/components/BorderBox1.vue'
import { reactive } from 'vue'
const chartItem = {
  title: {
    textStyle: {
      color: '#fff',
      fontSize: 15
    },
    subtextStyle: {
      color: '#fff',
      fontSize: 24
    },
    left: 'center',
    top: '45%'
  },
  tooltip: {
    trigger: 'item'
  },
  color: ['#3ba272', '#ee6666'],
  series: [
    {
      name: '达标考评情况',
      type: 'pie',
      radius: ['40%', '60%'],
      itemStyle: {
        borderRadius: 5,
        borderColor: '#fff',
        borderWidth: 1
      },
      label: {
        show: false
      },
      labelLine: {
        show: false
      },
      data: [
        {value: 90, name: '达标'},
        {value: 10, name: '不达标'}
      ]
    }
  ]
}
const chart1 = reactive({
  ...chartItem,
  title: {
    text: '考勤率',
    subtext: '79%',
    ...chartItem.title
  }
})
const chart2 = reactive({
  ...chartItem,
  title: {
    text: '驳回率',
    subtext: '79%',
    ...chartItem.title
  },
})
const chart3 = reactive({
  ...chartItem,
  title: {
    text: '填报率',
    subtext: '9%',
    ...chartItem.title
  }
})
const chart4 = reactive({
  ...chartItem,
  title: {
    text: '及时率',
    subtext: '79%',
    ...chartItem.title
  }
})
const chart5 = reactive({
  title: {
    text: '安全质量问题',
    textStyle: {
      color: '#fff'
    },
    left: '35%',
    top: '10%'
  },
  series: [
    {
      name: 'Expected',
      type: 'funnel',
      left: '25%',
      width: '50%',
      label: {
        // formatter: '{b}Expected'
      },
      labelLine: {
        show: false
      },
      itemStyle: {
        opacity: 0.7
      },
      data: [
        { value: 1, name: '一级' },
        { value: 2, name: '' },
        { value: 3, name: '' },
        { value: 4, name: '' },
        { value: 5, name: '' }
      ]
    }
  ]
})
const chart6 = reactive({
  angleAxis: {
    show: false,
    max: 1000 * 3 / 2, //这里将极坐标最大值转换成仪表盘的最大值，(360度除以240度)
    type: 'value',
    startAngle: 210, //极坐标初始角度，从第一象限算起，大约在7-8点钟角度之间
    splitLine: {
      show: false
    }
  },
  barMaxWidth: 20, //圆环宽度
  radiusAxis: {
    show: false,
    type: 'category'
  },
  polar: {
    center: ['50%', '50%'],
    radius: '120%'
  },
  series: [
    {
      type: 'bar',
      data: [{
        value: 750,
        itemStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 1, //从左到右 0-1
            y2: 0,
            colorStops: [{
              offset: 0,
              color: '#CD48AE'
            }, {
              offset: 1,
              color: '#2CABFC'
            }],
            globalCoord: false
          },
          shadowColor: 'rgba(255, 255, 255, 0.2)',
          shadowBlur: 10
        }
      }],
      barGap: '-100%',
      coordinateSystem: 'polar',
      roundCap: true,
      z: 2
    },
    {
      type: 'bar',
      data: [{
        value: 1000,
        itemStyle: {
          color: '#265195',
          shadowColor: 'rgba(0, 0, 0, 0.2)',
          shadowBlur: 5,
          shadowOffsetY: 2
        }
      }],
      barGap: '-100%',
      coordinateSystem: 'polar',
      roundCap: true,
      z: 1
    },
    {
      type: 'gauge',
      startAngle: 210, //起始角度，同极坐标
      endAngle: -30, //终止角度，同极坐标
      max: 1000,
      splitNumber: 5, //分割线个数（除原点外）
      axisLine: { // 坐标轴线
        show: false
      },
      pointer: {
        show: false
      },
      axisLabel: {
        show: false,
      },
      axisTick: {
        show: false
      },
      splitLine: {
        show: false
      },
      title: {
        color: '#fff',
        shadowColor: '#fff',
        fontSize: 16,
        offsetCenter: ["0", '-25%'] //位置偏移
      },
      detail: { //仪表盘数值
        offsetCenter: ["0", '15%'],
        color: '#fff',
        fontSize: 20
      },
      data: [{value: 750, name: '评价'}]
    }
  ]
})

const chart7 = reactive({
  ...chartItem,
  title: {
    text: '考勤率',
    subtext: '79%',
    ...chartItem.title
  }
})

const chart8 = reactive({
  ...chartItem,
  title: {
    text: '填报率',
    subtext: '9%',
    ...chartItem.title
  }
})
const chart9 = reactive({
  ...chartItem,
  title: {
    text: '及时率',
    subtext: '9%',
    ...chartItem.title
  }
})
const chart10 = {
  dataset: {
    source: [
      ['amount' , 'product'],
      [-3, '违规工序报验数量'],
      [5, '发起安全质量问题'],
      [10, '不合格原材料'],
      [10, '不合格试件'],
      [10, '实体检测'],
      [10, '工艺性检测']
    ]
  },
  grid: { containLabel: true },
  xAxis: { name: 'amount', show: false },
  yAxis: { type: 'category',axisTick: { show: false }, axisLabel: { color: '#fff' } },
  visualMap: {
    show: false,
    orient: 'horizontal',
    left: 'center',
    min: -10,
    max: 10,
    text: ['High Score', 'Low Score'],
    dimension: 0,
    inRange: {
      color: ['#65B581', '#FFCE34', '#FD665F']
    }
  },
  series: [
    {
      type: 'bar',
      encode: {
        x: 'amount',
        y: 'product'
      }
    }
  ]
}
</script>

<template>
<div class="work-view">
  <div class="wv-l">
    <border-box1 title="施工单位人员评价">
      <div class="cl">
        <v-chart class="data-chart data-chart1" :option="chart1" autoresize></v-chart>
        <v-chart class="data-chart data-chart2" :option="chart2" autoresize></v-chart>
        <v-chart class="data-chart data-chart3" :option="chart3" autoresize></v-chart>
        <v-chart class="data-chart data-chart4" :option="chart4" autoresize></v-chart>
        <v-chart class="data-chart" :option="chart5" autoresize></v-chart>
        <v-chart class="data-chart" :option="chart6" autoresize></v-chart>
      </div>
    </border-box1>
  </div>
  <div class="wv-r">
    <border-box1 title="监理单位人员评价">
      <div class="cl">
        <v-chart class="data-chart data-chart1" :option="chart7" autoresize></v-chart>
        <v-chart class="data-chart data-chart1" :option="chart8" autoresize></v-chart>
        <v-chart class="data-chart data-chart1" :option="chart9" autoresize></v-chart>
        <v-chart class="data-chart data-chart1" :option="chart9" autoresize></v-chart>
        <v-chart class="data-chart data-chart1" :option="chart10" autoresize></v-chart>
        <v-chart class="data-chart" :option="chart6" autoresize></v-chart>
      </div>
    </border-box1>
  </div>
</div>
</template>


<style scoped>
.work-view {
  width: 100%;
  height: 100%;
  display: flex;
}
.wv-l {
  width: 50%;
}
.wv-r {
  width: 50%;
}
.cl {
  position: relative;
  height: 100%;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.data-chart {
  width: 50%;
  height: 33%;
  /*position: absolute;*/
}

.data-chart1 {
  left: 0;
  top: 30px;
}

.data-chart2 {
  right: 10px;
  top: 30px;
}
.data-chart3 {
  left: 0;
  bottom: 0;
}
.data-chart4 {
  right: 10px;
  bottom: 0;
}
</style>